<template>
  <div class="flex-1 pb-50 bg-neutral-10 pt-10">
    <div class="w-full h-20 lg:h-17 block"></div>
    <section class="flex-1 pb-50 bg-neutral-10 pt-10">
      <div class="max-w-screen-xl mx-auto px-11">
        <div class="flex items-center justify-between space-x-7">
          <div class="flex-1">
            <nav class="dioa-breadcrumb__container" aria-label="Breadcrumb">
              <ol class="dioa-breadcrumb__list flex items-center">
                <li class="dioa-breadcrumb__item flex items-center shrink-0">
                  <router-link
                    to="/"
                    class="outline-none dioa-breadcrumb__link transition text-neutral-60 text-base hover:underline shrink-0"
                    >首页</router-link
                  ><span
                    aria-hidden="true"
                    class="dioa-breadcrumb__separator mx-2 text-neutral-50 w-[14px] h-[14px] block rotate-[120deg]"
                    ><svg
                      viewBox="0 0 24 24"
                      width="24"
                      height="24"
                      class="dioa-icon w-full h-full"
                    >
                      <line
                        x1="2"
                        y1="12"
                        x2="23"
                        y2="12"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      ></line></svg
                  ></span>
                </li>
                <li
                  class="dioa-breadcrumb__item flex items-center flex-shrink overflow-hidden"
                >
                  <span
                    @click="selectTab(-1)"
                    class="dioa-breadcrumb__current-page text-black text-2xl font-medium line-clamp-1"
                    style="cursor: pointer"
                    >个人中心</span
                  >
                </li>
              </ol>
            </nav>
          </div>
        </div>
        <div class="mt-7">
          <div class="flex items-start">
            <div
              class="dioa-tabs__root w-[202px] grid grid-flow-row gap-1 bg-white rounded-xl px-3 py-5 shrink-0 text-lg font-medium"
              style="margin-right: 20px"
            >
              <router-link
                to="/user/order"
                @click="selectTab(0)"
                class="dioa-tabs__tab relative outline-none py-2 h-13 px-5 flex items-center text-lg font-medium justify-start text-black bg-white transition hover:bg-neutral-20 aria-selected:bg-neutral-30 rounded-md"
                :class="{ 'bg-gray': indextab === 0 }"
              >
                我的订单</router-link
              ><router-link
                to="/user/collectionRecord"
                @click="selectTab(1)"
                class="dioa-tabs__tab relative outline-none py-2 h-13 px-5 flex items-center text-lg font-medium justify-start text-black bg-white transition hover:bg-neutral-20 aria-selected:bg-neutral-30 rounded-md"
                :class="{ 'bg-gray': indextab === 1 }"
              >
                收藏记录</router-link
              >
              <router-link
                to="/user/machineCode"
                class="dioa-tabs__tab relative outline-none py-2 h-13 px-5 flex items-center text-lg font-medium justify-start text-black bg-white transition hover:bg-neutral-20 aria-selected:bg-neutral-30 rounded-md"
                :class="{ 'bg-gray': indextab === 2 }"
                @click.native="selectTab(2)"
                >机器码</router-link
              >
              <router-link
                to="/user/issuingReceipt"
                @click.native="selectTab(3)"
                class="dioa-tabs__tab relative outline-none py-2 h-13 px-5 flex items-center text-lg font-medium justify-start text-black bg-white transition hover:bg-neutral-20 aria-selected:bg-neutral-30 rounded-md"
                :class="{ 'bg-gray': indextab === 3 }"
              >
                开票
              </router-link>
            </div>
            <div class="flex-1 ml-7">
              <div class="flex flex-col space-y-5">
                <div class="bg-white p-10 rounded-xl" v-if="indextab == -1">
                  <div class="flex items-start">
                    <div class="relative group">
                      <div
                        class="dioa-box relative after:absolute after:rounded-full after:top-0 after:bottom-0 after:left-0 after:right-0 hover:after:bg-black-25 after:transition group-hover:after:bg-black-25"
                      >
                        <img
                          src="../../assets/img/av.jpeg"
                          class="w-30 h-30 rounded-full bg-white"
                        />
                      </div>
                    </div>
                    <div
                      class="flex-1 shrink ml-10 mr-15 self-center mt-7"
                      style="margin-bottom: 10px"
                    >
                      <div class="flex items-center">
                        <div class="flex items-center space-x-3">
                          <h3
                            class="font-medium text-4xl transition hover:text-neutral-60"
                          >
                            {{ userInfo.userName }}
                          </h3>
                        </div>
                      </div>
                      <div class="mt-4 text-neutral-60 text-md">
                        <p>和您一起，让创意更有价值</p>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="bg-white py-10 rounded-xl" v-if="indextab == -1">
                  <h4 class="text-3xl font-medium px-10">最新公告</h4>
                  <div class="px-6">
                    <!--$-->
                    <div class="grid gap-y-1 grid-flow-row grid-cols-1 mt-7">
                      <router-link
                        to="/"
                        v-for="item in columnList"
                        :key="item.id"
                        class="outline-none"
                        ><div
                          class="h-13 flex items-center justify-between px-4 hover:bg-neutral-20 transition rounded-md"
                        >
                          <p class="flex-1 truncate">{{ item.title }}</p>
                          <p class="text-neutral-50 pl-10 shrink-0">
                            {{ item.createTime }}
                          </p>
                        </div></router-link
                      >
                    </div>
                    <!--/$-->
                  </div>
                </div>
                <div v-if="indextab != -1" class="bg-white p-10 rounded-xl">
                  <router-view @update-value="changeParentValue"></router-view>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { getcolumnarticel } from "@/common/userApi";
import { useUserStore } from "@/store/loginStore";
import { columnListProps } from "@/common/utils/userType";

const userStore = useUserStore();
const user = JSON.parse(<string>localStorage.getItem("userInfo"));
const userInfo = userStore.useInfo || user;

// 获取最新公告
const columnList = ref<any>([]);
getcolumnarticel().then((res) => {
  // console.log(res);
  columnList.value = res.data;
});

//设置右边菜单样式
const indextab = ref(-1);
function selectTab(id: number) {
  // this.activeIndex = id;
  // console.log(id);
  indextab.value = id;
}
const changeParentValue = (newValue: number) => {
  console.log(newValue, "改了吗");
  indextab.value = newValue;
};
</script>

<style lang="scss" scoped></style>
